<template>
	<echartBox title="工程类别对比" width="651px" height="427px">
		<div class="echart-show" ref="chart"></div>
	</echartBox>
</template>

<script>
import * as echarts from "echarts";
import echartBox from "../echart-box.vue";

export default {
	name: "Page3ItemBox1",
	components: {
		echartBox,
	},
	props: {
		chartData: {
			type: Object,
			required: true,
			default: () => ({
				indicators: [],
				series1: { name: "", data: [] },
				series2: { name: "", data: [] }
			})
		}
	},
	methods: {
		// 初始化图表
		initChart() {
			this.buildRadarChart();
		},
		// 构建雷达图
		buildRadarChart() {
			let chartContainer = this.$refs.chart;
			if (!chartContainer || chartContainer.clientWidth === 0 || chartContainer.clientHeight === 0) {
				console.warn('Chart container not ready, skipping chart initialization');
				return;
			}
			
			let myChart = echarts.init(chartContainer);
			
			// 使用单独定义的数据结构
			const { indicators, series1, series2 } = this.chartData;

			const option = {
				backgroundColor: "transparent",
				legend: {
					right: 20,
					top: 'center',
					orient: 'vertical',
					data: [series1.name, series2.name],
					textStyle: {
						color: '#fff',
						fontSize: 14
					},
					itemWidth: 18,
					itemHeight: 14,
					itemGap: 20
				},
				radar: {
					center: ['40%', '50%'],
					radius: '65%',
					indicator: indicators,
					axisLine: {
						lineStyle: {
							color: 'rgba(255, 255, 255, 0.2)'
						}
					},
					splitLine: {
						lineStyle: {
							color: 'rgba(255, 255, 255, 0.2)'
						}
					},
					splitArea: {
						show: false
					},
					axisLabel: {
						color: '#fff',
						fontSize: 12
					},
					name: {
						textStyle: {
							color: '#fff',
							fontSize: 14
						}
					}
				},
				series: [
					{
						name: series1.name,
						type: 'radar',
						data: [
							{
								value: series1.data,
								name: series1.name,
								areaStyle: {
									color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
										{
											color: '#004fac',
											offset: 0
										},
										{
											color: 'rgba(0, 79, 172, 0.2)',
											offset: 1
										}
									])
								},
								lineStyle: {
									color: '#004fac',
									width: 2
								},
								itemStyle: {
									color: '#004fac'
								}
							}
						]
					},
					{
						name: series2.name,
						type: 'radar',
						data: [
							{
								value: series2.data,
								name: series2.name,
								areaStyle: {
									color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
										{
											color: '#2a9aa5',
											offset: 0
										},
										{
											color: 'rgba(42, 154, 165, 0.2)',
											offset: 1
										}
									])
								},
								lineStyle: {
									color: '#2a9aa5',
									width: 2
								},
								itemStyle: {
									color: '#2a9aa5'
								}
							}
						]
					}
				]
			};

			myChart.setOption(option);
		},
	},
};
</script>

<style scoped lang="scss">
.echart-show {
	width: 100%;
	height: 100%;
}
</style>